<template>
    <div class="app">
        <h1>{{msg}}，学生的姓名是：{{studentName}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :receiveSchoolName="receiveSchoolName"/>

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用 v-on 或 @） -->
        <!-- <Student @atbian="receiveStudentName" @demo="testOff"/> -->

        <!-- 通过父组件给子组件绑定以恶搞自定义事件实现：子给父传递数据（第二种写法，使用ref） native修饰表示该事件是原生事件，无须使用$emit触发-->
        <Student ref="student" @click.native="show"/>
    </div>
</template>

<script>
// 注意，如果组件中的 style 的样式属性同名，后引用的样式会覆盖前面引用的
// 引入Student
import Student from './components/Student.vue'
// 引入School
import School from './components/School.vue'

export default {
    name:'App',
    components:{
        Student,
        School,
    }, 
    data() {
        return {
            msg :'你好啊！',
            studentName:'',
        }
    },
    methods:{
        receiveSchoolName(name){
            console.log('APP收到学校数据',name);
        },
        // 可变形参
        receiveStudentName(name,...params){
            console.log('APP收到学生数据',name,params);
            this.studentName = name
        },
        testOff(){
             console.log('testOff自定义事件被调用');
        },
        show(){
            alert('12345')
        }
    },
    // 挂载钩子
    mounted(){
        // 绑定自定事件方式一：
        this.$refs.student.$on('atbian',this.receiveStudentName)  // 绑定自定义事件
        // this.$refs.student.$once('atbian',this.receiveStudentName) // 绑定自定义事件(一次性)

        // 绑定自定义事件方式二：
        /* this.$refs.student.$on('atbian',function(name,...params){
            console.log('APP收到学生数据',name,params);
            console.log(this); // Vue承诺：谁触发该事件，那么事件中的this就指向谁。如果使用箭头函数此时的this依旧指向外层对象
        }) */
    }
}
</script> 

<!-- 
    尤其注意：在App组件中的样式，如果没有写 scoped ，会导致所有子组件的相同样式与之冲突
    lang：指定当前组件使用的样式语言（默认css）
 -->
<style scoped lang="css">
    .app{
        background-color:gray;
        padding: 2px;
    }
</style>
 